<!--
  文件级注释：AppShell 布局组件
  说明：提供应用的头部、侧边导航栏与内容区域。
  本次变更：
  1) 将左侧导航“总览”修改为“首页”；
  2) 删除“支付”入口（对应路由 /payments），以满足“支付导览相关页面删除”的需求。
  参数：无（组件使用全局路由与状态）。
  返回值：无（渲染 UI）。
  异常：无显式抛出；若获取用户信息接口返回 code ≠ 0，则视为失败并不设置用户信息。
-->
<template>
  <div class="app-shell">
    <header class="app-header">
      <div class="brand">
        <button class="menu-toggle md:hidden" @click="toggleSidebar">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <span class="logo" v-html="'💰'"></span>
        <span class="title">惠旺店 H5 管理端</span>
      </div>
      <div class="spacer"></div>
      <div class="user-info" v-if="auth.user">
        <span class="user-name">{{ auth.user.name }}</span>
        <span class="user-phone">{{ auth.user.phone }}</span>
      </div>
      <button class="btn danger" @click="onLogout">退出登录</button>
    </header>
    <div class="app-body">
      <!-- 移动端遮罩层 -->
      <div v-if="sidebarOpen" class="sidebar-overlay md:hidden" @click="closeSidebar"></div>
      
      <!-- 侧边导航栏 -->
      <nav class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
        <router-link class="navlink" to="/dashboard" @click="closeSidebar" v-html="'🏠 首页'"></router-link>
        <router-link class="navlink" to="/coupons" @click="closeSidebar" v-html="'🎟️ 优惠券'"></router-link>
        <router-link class="navlink" to="/coupon-packages" @click="closeSidebar" v-html="'📦 优惠券包'"></router-link>
        <router-link class="navlink" to="/stores" @click="closeSidebar" v-html="'🏬 门店管理'"></router-link>
        <router-link class="navlink" to="/payment-codes" @click="closeSidebar" v-html="'🧾 收款码管理'"></router-link>
        <router-link class="navlink" to="/payment-platforms" @click="closeSidebar" v-html="'🏦 支付平台管理'"></router-link>
        <router-link class="navlink" to="/orders" @click="closeSidebar" v-html="'🧾 订单管理'"></router-link>
        <router-link class="navlink" to="/divided-agreements" @click="closeSidebar" v-html="'🤝 分账协议'"></router-link>
        <router-link class="navlink" to="/my-divided-agreements" @click="closeSidebar" v-html="'👥 我的分账协议'"></router-link>
        <router-link class="navlink" to="/divided-records" @click="closeSidebar" v-html="'📚 分账记录'"></router-link>
        <router-link class="navlink" to="/merchants" @click="closeSidebar" v-html="'🏪 商户管理'"></router-link>
        <router-link class="navlink" to="/users" @click="closeSidebar" v-html="'👤 用户管理'"></router-link>
        <router-link class="navlink" to="/roles" @click="closeSidebar" v-html="'🔐 角色管理'"></router-link>
        <router-link class="navlink" to="/logs" @click="closeSidebar" v-html="'📝 日志'"></router-link>
      </nav>
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { getCurrentUser } from '../services/user'

const router = useRouter()
const auth = useAuthStore()
const sidebarOpen = ref(false)

/**
 * 生命周期：onMounted
 * 说明：组件挂载后，若已认证但本地无用户信息，则调用后端接口拉取当前用户。
 * 参数：无
 * 返回值：无
 * 异常：接口异常使用 console.error 打印；当返回值 code ≠ 0 时视为失败并忽略设置用户信息。
 */
onMounted(async () => {
  if (auth.isAuthenticated && !auth.user) {
    try {
      const result = await getCurrentUser()
      if (result?.code === 0 && result?.data) {
        auth.setUser(result.data)
      }
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
})

/**
 * 函数：onLogout
 * 说明：退出登录并跳转至登录页。
 * 参数：无
 * 返回值：void
 * 异常：无显式抛出。
 */
function onLogout() {
  auth.logout()
  router.replace({ path: '/login' })
}

/**
 * 函数：toggleSidebar
 * 说明：切换侧边栏的展开与收起状态。
 * 参数：无
 * 返回值：void
 * 异常：无显式抛出。
 */
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}

/**
 * 函数：closeSidebar
 * 说明：关闭（收起）侧边栏。
 * 参数：无
 * 返回值：void
 * 异常：无显式抛出。
 */
const closeSidebar = () => {
  sidebarOpen.value = false
}
</script>

<style scoped>
.app-shell { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
  overflow: hidden; 
  background: var(--bg);
}

.app-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 10;
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: var(--space-3); 
  font-weight: 700; 
}

.logo { 
  width: 40px; 
  height: 40px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-lg); 
  background: linear-gradient(135deg, var(--primary), var(--primary-600)); 
  color: #fff; 
  font-size: var(--text-lg);
  box-shadow: var(--shadow-sm);
}

.title { 
  font-size: var(--text-lg); 
  color: var(--text);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-right: var(--space-4);
}

.user-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
}

.user-phone {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.spacer { flex: 1; }

.app-body { 
  flex: 1; 
  display: flex; 
  min-height: 0; 
}

.sidebar { 
  width: 240px; 
  background: var(--card-bg); 
  border-right: 1px solid var(--border); 
  padding: var(--space-6) var(--space-4); 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-2); 
  box-shadow: var(--shadow-sm);
}

.navlink { 
  color: var(--text-secondary); 
  text-decoration: none; 
  padding: var(--space-3) var(--space-4); 
  border-radius: var(--radius); 
  display: flex; 
  align-items: center; 
  gap: var(--space-3); 
  font-weight: 500;
  font-size: var(--text-sm);
  transition: all 0.2s ease;
  position: relative;
}

.navlink:hover {
  background: var(--bg-secondary);
  color: var(--text);
  transform: translateX(4px);
}

.navlink.router-link-active { 
  background: var(--primary-50); 
  color: var(--primary-700);
  font-weight: 600; 
}

.navlink.router-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

.content { 
  flex: 1; 
  padding: var(--space-6); 
  overflow: auto; 
  min-width: 0; 
  word-break: normal; 
  overflow-wrap: break-word; 
  background: var(--bg);
}

/* 限制内容最大宽度并居中，提升桌面全屏观感 */
.content :deep(.container) { 
  max-width: 1280px; 
  margin: 0 auto; 
}

/* 移动端菜单按钮 */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: var(--space-3);
}

.menu-toggle span {
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* 移动端遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  animation: fadeIn 0.3s ease;
}

@media (min-width: 1680px) {
  .content :deep(.container) { 
    max-width: 1440px; 
  }
}

@media (max-width: 1200px) {
  .content :deep(.container) { 
    max-width: 100%; 
  }
  
  .sidebar {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 var(--space-4);
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    width: 250px;
    z-index: 999;
    transition: left 0.3s ease;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding-top: 80px; /* 为header留出空间 */
  }
  
  .sidebar-open {
    left: 0;
  }
  
  .content {
    padding: var(--space-4);
    margin-left: 0;
  }
}

@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
}
</style>
